<template>
    <div class="service-ad-pic_wrapper">
        <img :src="adPicUrl" alt="" />
    </div>
    <nav class="service-nav">
        
    </nav>
    <OrderListContent :ordersList="ordersList"></OrderListContent>
    <ElPagination
        class="mt20"
        :pageSize="getListParams.size"
        layout="total, prev, pager, next"
        :total="total"
        @currentChange="handleCurrentChange"
    ></ElPagination>
</template>

<script lang="ts" setup>
import { reactive, ref, Ref, inject } from 'vue';
import { RefreshRight } from '@element-plus/icons-vue';
import { getOrderDetail, getServiceIndexList } from '@/api/api.query.util';
import OrderListContent from '@/views/orderHistory/Components/OrderHistoryList.vue';
import { getCookie } from '@/utils/utils';

const thumbnail = require('@/assets/image/huawei.jpg');
const adPicUrl = ref(require('@/assets/image/rixi.jpg'));

const username = getCookie('userName')
const ordersList: Ref<Array> = ref([]);
const total: Ref<number> = ref(0);
const getListParams = reactive({
    current: 1,
    size: 10,
});
// 获取服务列表
getOrders();
function getOrders() {
    getOrderDetail({
        method: 'get',
        data: {
            username : username,
            status: 1
        },
    }).then((res) => {
        ordersList.value = res?.data?.allorder || [];
        total.value = res?.data?.total;
    });
}
function handleCurrentChange(current: number) {
    getListParams.current = current;
    getOrders();
}
const inject1: any = inject('reload');
function lacking() {
    inject1();
}
</script>
<style scoped>
.service-ad-pic_wrapper {
    height: 128px;
    margin-bottom: 16px;
}
.service-ad-pic_wrapper img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.service-nav {
    display: flex;
    justify-content: space-between;
    height: 50px;
    background-color: var(--section-color);
    border-radius: var(--border-radius);
    margin-bottom: 18px;
}

.service-category {
    display: flex;
}
.service-category > li {
    display: flex;
    align-items: center;
    padding: 0 40px;
}

.service-filter_icon {
    width: 16px;
    height: 16px;
    background: url('~@/assets/image/shaixuan_default@2x.png') no-repeat center center / 16px;
    cursor: pointer;
}

.service-filter {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 56px;
}
</style>
